<template>
  <!-- :autoplay="{ delay: 4000 }" -->
  <div class="swiper-box">
    <img class="pre" src="@/assets/pre.png" @click="pre" />
    <img class="next" src="@/assets/next.png" @click="next" />
    <div class="swiperBox1" ref="swiperBox">
      <swiper
        :autoplay="{ delay: 10000 }"
        :direction="'vertical'"
        :pagination="{
          clickable: true,
        }"
        :modules="modules"
        :loop="true"
        class="mySwiper"
      >
        <swiper-slide v-for="item in list1" :key="item.id"
          ><img :src="funimg(item)"
        /></swiper-slide>
      </swiper>
      <swiper
        :autoplay="{ delay: 10000 }"
        :direction="'vertical'"
        :pagination="{
          clickable: true,
        }"
        :modules="modules"
        :loop="true"
        class="mySwiper"
      >
        <swiper-slide v-for="item in list3" :key="item.id"
          ><img :src="funimg(item)"
        /></swiper-slide>
      </swiper>

      <swiper
        :autoplay="{ delay: 10000 }"
        :direction="'vertical'"
        :pagination="{
          clickable: true,
        }"
        :modules="modules"
        :loop="true"
        class="mySwiper"
      >
        <swiper-slide v-for="item in list2" :key="item.id"
          ><img :src="funimg(item)"
        /></swiper-slide>
      </swiper>
      <swiper
        :autoplay="{ delay: 10000 }"
        :direction="'vertical'"
        :pagination="pagination"
        :modules="modules"
        :loop="true"
        class="mySwiper"
      >
        <swiper-slide v-for="item in list1" :key="item.id"
          ><img :src="funimg(item)"
        /></swiper-slide>
      </swiper>
      <swiper
        :autoplay="{ delay: 10000 }"
        :direction="'vertical'"
        :pagination="{
          clickable: true,
        }"
        :modules="modules"
        :loop="true"
        class="mySwiper"
      >
        <swiper-slide v-for="item in list3" :key="item.id"
          ><img :src="funimg(item)"
        /></swiper-slide>
      </swiper>

      <swiper
        :autoplay="{ delay: 10000 }"
        :direction="'vertical'"
        :pagination="{
          clickable: true,
        }"
        :modules="modules"
        :loop="true"
        class="mySwiper"
      >
        <swiper-slide v-for="item in list2" :key="item.id"
          ><img :src="funimg(item)"
        /></swiper-slide>
      </swiper>
      <swiper
        :autoplay="{ delay: 10000 }"
        :direction="'vertical'"
        :pagination="{
          clickable: true,
        }"
        :modules="modules"
        :loop="true"
        class="mySwiper"
      >
        <swiper-slide v-for="item in list1" :key="item.id"
          ><img :src="funimg(item)"
        /></swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { onMounted, onUnmounted, ref } from "vue";

// Import Swiper styles
import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
import "swiper/css/pagination";

import request from "@/request/request";

// import required modules
import {
  Autoplay,
  EffectCoverflow,
  Navigation,
  Pagination,
} from "swiper/modules";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      pagination: {
        clickable: true,
        renderBullet: function (index: number, className: string) {
          return '<span class="' + className + '">' + "</span>";
        },
      },
      modules: [Autoplay, EffectCoverflow, Navigation, Pagination],
      index: 0,
      list1: <any>[],
      list2: <any>[],
      list3: <any>[],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      // 轮播图
      let data = new FormData();
      data.set("bannerType", "mall_advert_type");
      request("findAdvertList", "post", data).then((res: any) => {
        let data = res.data.advertList;
        this.list1 = data.filter((v: any) => v.advertType == 0);
        this.list2 = data.filter((v: any) => v.advertType == 1);
        this.list3 = data.filter((v: any) => v.advertType == 2);
        console.log(this.list1, " this.list1");
        console.log(this.list2, " this.list1");
        console.log(this.list3, " this.list1");
      });
    },
    funimg(item: any) {
      return "http://121.40.105.156:8088" + item.advertUrl;
    },
    pre() {
      const swiperBox: any = this.$refs.swiperBox;
      if (this.index == 1) {
        swiperBox.style.transform = `translateX(${-76.875 * (this.index + 1)}rem)`;
        swiperBox.style.transition = "0s";
        this.index = -2;
        setTimeout(() => {
          this.pre();
        }, 0);
      } else {
        this.index++;
        console.log(this.index, "this.index--;");
        swiperBox.style.transform = `translateX(${76.875 * this.index}rem)`;
        swiperBox.style.transition = "2s";
      }
    },
    next() {
      const swiperBox: any = this.$refs.swiperBox;
      if (this.index == -1) {
        swiperBox.style.transform = `translateX(${-76.875 * (this.index - 1)}rem)`;
        swiperBox.style.transition = "0s";
        this.index = 2;
        setTimeout(() => {
          this.next();
        }, 0);
      } else {
        this.index--;
        swiperBox.style.transform = `translateX(${76.875 * this.index}rem)`;
        swiperBox.style.transition = "2s";
      }
    },
  },
};
</script>
<style lang="scss">
.swiper-box {
  width: 100%;
  overflow: hidden;
  position: relative;
  .swiperBox1 {
    position: relative;
    display: flex;
    justify-content: center;
    transform: translateX(0rem);
    .last-img {
      width: 75rem;
      height: 25rem;
      flex-shrink: 0;
      margin: 0 0.9375rem;
    }
  }
  .pre {
    position: absolute;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%);
    margin-left: -35rem;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 9;
  }
  .next {
    position: absolute;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%);
    margin-left: 35rem;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 9;
  }
}
.mySwiper {
  flex-shrink: 0;
  margin: 0 0.9375rem;
  position: relative;
}
.swiper {
  width: 75rem;
  height: 31.25rem;
}
.swiper-slide {
  width: 100% !important;
  height: 25rem;
  display: flex;
  justify-content: center;
  img {
    width: 100% !important;
  }
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  top: 90%;
}
.swiper-pagination-bullet {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 1;
  background: rgba(255, 255, 255, 0.7);
}

.swiper-pagination-bullet-active {
  width: 0.625rem;
  height: 1.25rem;
  border-radius: 0.3125rem;
  opacity: 1;
  background-color: #fff;
}
</style>
